<template>
  <div class="map-fence__page">
    <div class="maplink-group">
      <el-radio-group
        v-model="activeLink"
        size="small"
        class="radio-group-pill"
        @change="onChecked"
      >
        <el-radio-button
          v-for="(menu,index) in menus"
          :key="index"
          :label="menu.id"
          :disabled="!menu.id"
        >
          <em-icon
            v-if="menu.thumb"
            :name="menu.thumb"
          />
          {{ menu.title }}
        </el-radio-button>
      </el-radio-group>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AssembleLink',
  props: {
    value: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      activeLink: '',
      menus: []
    }
  },
  computed: {},
  created() {
    this.onLoadData()
  },
  methods: {
    onLoadData() {
      this.$http.system.sourceLinks().then(res => {
        this.menus = res.data
        this.setActiveIndex()
        console.log('this.activeLink', this.activeLink)
      })
    },
    setActiveIndex() {
      if (this.value) {
        if (this.value.id) {
          this.activeLink = this.value.id
        } else if (this.value.map_id) {
          var activeMenu = this.menus.find(item => {
            return item.map_id === this.value.map_id
          })
          if (activeMenu) {
            this.activeLink = activeMenu.id
          }
        }
      }
    },
    onChecked(index) {
      var activeLink = this.menus.find(item => {
        return item.id === index
      })
      console.log(this.menus, activeLink, index)
      if (activeLink) {
        var mapData = activeLink.map_data
        if (activeLink.title) {
          mapData = Object.assign({}, mapData, {
            title: activeLink.title
          })
        }
        activeLink.source = 'assemble'
        activeLink.map_data = mapData
        this.$emit('input', activeLink)
      }
    }
  }
}
</script>

<style lang="scss">
.maplink-group {
  &__title {
    min-height: 34px;
    line-height: 34px;
    font-weight: bold;
  }
}
</style>
